<template>
    <el-select
        v-model="current"
        :filterable="remote || filterable"
        :remote="remote"
        reserve-keyword
        :placeholder="placeholder"
        :loading="loading"
        :size="size"
        :clearable="clearable"
        :multiple="multiple"
        v-bind="propsExtend"
        :title="currentLabel"
        :popper-append-to-body="popperAppendToBody"
        :popper-class="popperClass"
        :collapse-tags="collapseTags"
    >
        <el-option v-for="(item, index) in options" :key="index" :label="getFieldName(item)" :value="item[fieldKey]">
            <div v-if="multiple" style="display: flex; align-items: center;">
                <el-checkbox :value="current.includes(item[fieldKey])" @change="checkBox(item[fieldKey])" />
                <span style="margin-left: 6px;">{{ getFieldName(item) }}</span>
            </div>
        </el-option>
    </el-select>
</template>
<script>
// @ts-nocheck
import FormValid from './FormValid'
export default {
    mixins: [FormValid],
    props: {
        // 绑定的值，可使用 v-model 双向绑定
        value: [String, Number, Array],
        // 传的词典
        dict: {
            type: [Object, Array, Function]
        },
        // 绑定value的字段
        fieldKey: {
            type: String,
            default: 'id'
        },
        // 绑定label的字段 ,  传入方法处理返回 stirng
        fieldName: {
            type: [String, Function],
            default: 'name'
        },
        // 是否是远程搜索 (使用远程搜索时，dict必须为Function)
        remote: Boolean,
        // 是否可搜索
        filterable: Boolean,
        // 是否可清空
        clearable: { type: Boolean, default: true },
        // 是否禁用
        disabled: Boolean,
        // 大小
        size: String,

        placeholder: String,
        // 是否多选
        multiple: Boolean,
        // 如果为true，则@change返回结果为整个选中的全数据
        labelInValue: Boolean,
        popperAppendToBody: { type: Boolean, default: true },
        popperClass:{type: String, default: 'dict-select-popper'},
        collapseTags: { type: Boolean, default: false },
    },
    data() {
        return {
            loading: false,
            options: [],
            currentLabel: ''
        }
    },
    computed: {
        propsExtend() {
            const _props = {}
            if (this.remote && typeof this.dict === 'function'){ _props.remoteMethod = this.getDict}
            return _props
        },
        current: {
            get() {
                return this.value
            },
            set(value) {
                let select
                if (this.multiple && this.labelInValue) {
                    select = this.options.filter((item) => value.includes(item[this.fieldKey]))
                } else {
                    select = this.options.find((item) => item[this.fieldKey] === value)
                    this.currentLabel = select ? this.getFieldName(select) : ''
                }
                this.$emit('input', value)
                this.$emit('change', this.labelInValue ? select : value)
                this._dispatch('ElFormItem', 'el.form.change', value)
            }
        }
    },
    methods: {
        async getDict(keyWords) {
            if (this.loading) {return}
            let res = []
            this.loading = true
            try {
                res = await this.dict(keyWords)
            } catch (err) {
                console.error(err)
            }
            this.loading = false
            this.options = res
        },
        getFieldName(item) {
            return typeof this.fieldName === 'function' ? this.fieldName(item) : item[this.fieldName]
        },
        checkBox(id) {
            const index = this.current.indexOf(id)
            if (index > -1) {
                this.current.splice(index, 1)
            } else {
                this.current.push(id);
            }
        }
    },
    watch: {
        dict: {
            handler(dict) {
                if (dict) {
                    if (this.remote) {return}
                    if (typeof dict === 'function') {
                        this.getDict()
                    } else if (Array.isArray(dict)) {
                        this.options = dict
                    } else {
                        this.options = Object.keys(dict).map((key) => ({ id: key, name: dict[key] }))
                    }
                } else {
                    this.options = []
                }
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-select__tags {
    padding-left: 3px;
    .el-tag {
        height: 20px;
        line-height: 20px;
        margin: 6px 3px !important;
        background: #f5f7fa;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        color: #606266;
        .el-icon-close {
            color: #fff;
            top: 1px;
        }
        .el-select__tags-text{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            margin-right: 6px;
        }
    }
}
/deep/ .el-input .el-select__caret{
    color: #909399 !important;
}

/deep/ .el-select-dropdown{
    top: 32px !important;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    border: none;
    min-width: unset !important;
}
/deep/ .el-select-dropdown__item.hover{
    background-color: rgba(255,106,108,0.1);
}
/deep/.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{
    background-color: rgba(255,106,108,0.1);
}
/deep/ .el-input__inner{
    padding: 0 12px;
    font-size: 14px;
    &::placeholder{
        color: #909399 !important;
    }
}
/deep/.el-checkbox__inner{
    border-radius: 4px;
    &:hover{
        border: 1px solid #C0C4CC;
    }
}
</style>
<style lang="scss">
.dict-select-popper {
    border: none !important;
    box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.05) !important;
    .el-select-dropdown__item {
        &.hover {
            background-color: rgba(255, 106, 108, 0.1) !important;
        }
        &.selected {
            color: var(--theme) !important;
            background-color: rgba(255, 106, 108, 0.1);
        }
    }
}
.dict-select-popper.el-popper[x-placement^=top] .popper__arrow{
    border-top-color: #FFF;
}
.dict-select-popper.el-popper[x-placement^=bottom] .popper__arrow{
    border-bottom-color: #fff;
}

</style>
